<template>
    <div class="write-opt-select">
        <div class="write-opt-select-opt">{{optName}}</div>
        <div 
        id="show-select-supply-product" 
        class="write-opt-select-rig"
        @click="clickLine"
        >
            <span 
            class="write-opt-select-opt-val"
            :class="chooseTextSty.className"
            >{{chooseTextSty.text}}</span>
            <van-icon v-show="chooseTextSty.className === ''" class="icon" name="arrow" />
            <van-icon @click.stop.prevent="delOpt" v-show="chooseTextSty.className != ''" class="icon" name="cross" />
        </div>
    </div>
</template>

<script>
// UI组件
import { Icon, } from 'vant'

import Vue from 'vue'

Vue.use(Icon)

export default {
    name: 'OptionEnterChooseLine',
    props: {
        optName: { // 项目名称
            type: String,
            default: '选择产品'
        },
        placeholder: { // 默认文字
            type: String,
            default: ''
        },
        content: {
            type: String,
            default: ''
        },
        id: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            text: '',
        }
    },
    methods: {
        clickLine() {
            if (this.text === '') {
                this.$emit("skip", id)
            }
        },
        delOpt() {
            this.text = ''
            this.$emit("del", id)
        },
    },
    computed: {
        chooseTextSty() {
            let className = ''
            if (this.text.length > 0) {
                className = 'active'
            }
            return {
                text: this.text || this.placeholder,
                className,
            }
        },
    },
    watch: {
        content: {
            immediate: true,
            deep: true,
            handler(val) {
                this.text = val
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.write-opt-select {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f7f6f6;

    .write-opt-select-opt {
        flex-shrink: 0;
        font-weight: bold;

        &::after {
            content: ':';
            margin: 0 2px;
        }
    }

    .write-opt-select-rig {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        width: 100%;
        cursor: pointer;

        .write-opt-select-opt-val {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            overflow: hidden;
            width: 100%;
            color: #999999;
            height: 22px;
            line-height: 22px;

            .write-opt-select-opt-val-active {
                color: #333333;
            }
        }

        .active {
            color: #333333;
        }

        .icon {
            flex-shrink: 0;
            color: #999999;
            cursor: pointer;
        }
    }
}
</style>